<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sportsman Management</title>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- Add Bootstrap DataTable CSS -->
    <link rel="stylesheet" href="./css/dataTables.bootstrap4.min.css">
</head>
<body>
<script>
    function deleteSportsman(uuid) {
        if (confirm('确定要删除该运动员吗？')) {
            // 发送DELETE请求以删除运动员
            $.ajax({
                url: '/sportsmen/' + uuid, // 后端API路径
                method: 'DELETE',
                success: function () {
                    alert('Sportsman deleted successfully.');
                    location.reload()
                },
                error: function () {
                    alert('Error deleting sportsman.');
                }
            });
        }
    }

</script>
<!-- 在模态窗口中添加编辑表单 -->
<div class="modal fade" id="editSportsmanModal" tabindex="-1" role="dialog" aria-labelledby="editSportsmanModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editSportsmanModalLabel">Edit Sportsman</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑表单 -->
                <form id="editSportsmanForm">
                    <input type="hidden" id="editSportsmanUuid" name="uuid">
                    <div class="form-group">
                        <label for="editEvent">Event</label>
                        <input type="text" class="form-control" id="editEvent" name="event">
                    </div>
                    <div class="form-group">
                        <label for="editGroupIndex">Group Index</label>
                        <input type="number" class="form-control" id="editGroupIndex" name="groupIndex">
                    </div>
                    <div class="form-group">
                        <label for="editGroupName">Group Name</label>
                        <input type="text" class="form-control" id="editGroupName" name="groupName">
                    </div>
                    <div class="form-group">
                        <label for="editIndex">Index</label>
                        <input type="number" class="form-control" id="editIndex" name="index">
                    </div>
                    <div class="form-group">
                        <label for="editName">Name</label>
                        <input type="text" class="form-control" id="editName" name="name">
                    </div>
                    <div class="form-group">
                        <label for="editArea">Area</label>
                        <input type="text" class="form-control" id="editArea" name="area">
                    </div>
                    <!-- 添加其他编辑字段 -->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="saveEditedSportsman()">Save Changes</button>
            </div>
        </div>
    </div>
</div>
<script>
    // 编辑按钮点击时触发的函数
    function editSportsman(uuid) {
        // 发送GET请求以获取当前运动员的信息
        $.ajax({
            url: '/sportsmen/' + uuid,
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                // 填充模态窗口中的表单字段
                $('#editSportsmanUuid').val(data.uuid);
                $('#editEvent').val(data.event);
                $('#editGroupIndex').val(data.groupIndex);
                $('#editGroupName').val(data.groupName);
                $('#editIndex').val(data.index);
                $('#editName').val(data.name);
                $('#editArea').val(data.area);
                // 显示编辑模态窗口
                $('#editSportsmanModal').modal('show');
            },
            error: function () {
                alert('Error loading Sportsman data for editing.');
            }
        });
    }

    // 保存编辑后的运动员信息
    function saveEditedSportsman() {
        // 收集编辑后的信息
        var editedSportsman = {
            uuid: $('#editSportsmanUuid').val(),
            event: $('#editEvent').val(),
            groupIndex: $('#editGroupIndex').val(),
            groupName: $('#editGroupName').val(),
            index: $('#editIndex').val(),
            name: $('#editName').val(),
            area: $('#editArea').val()
            // 添加其他字段的收集
        };

        // 发送PUT请求以更新运动员信息
        $.ajax({
            url: '/sportsmen',
            method: 'PUT',
            data: JSON.stringify(editedSportsman),
            contentType: 'application/json',
            success: function (data) {
                // 更新成功后，关闭模态窗口
                $('#editSportsmanModal').modal('hide');
                // 重新加载运动员列表
                location.reload()
            },
            error: function () {
                alert('Error updating Sportsman.');
            }
        });
    }
</script>

<script>
    // 处理添加运动员的函数
    function addSportsman() {
        // 收集用户输入的信息
        var newSportsman = {
            event: $('#addEvent').val(),
            groupIndex: $('#addGroupIndex').val(),
            groupName: $('#addGroupName').val(),
            index: $('#addIndex').val(),
            sportName: $('#addName').val(),
            area: $('#addArea').val()
        };

        // 发送POST请求以添加新的运动员
        $.ajax({
            url: '/sportsmen',
            method: 'POST',
            data: JSON.stringify(newSportsman),
            contentType: 'application/json',
            success: function (data) {
                // 添加成功后，关闭模态窗口
                $('#addSportsmanModal').modal('hide');
                // 重新加载运动员列表
                location.reload()
            },
            error: function () {
                alert('Error adding Sportsman.');
            }
        });
    }
</script>
<!-- 添加模态窗口 -->
<div class="modal fade" id="addSportsmanModal" tabindex="-1" role="dialog" aria-labelledby="addSportsmanModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addSportsmanModalLabel">Add Sportsman</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加表单字段 -->
                <!-- 添加表单字段 -->
                <form id="addSportsmanForm">
                    <div class="form-group">
                        <label for="addEvent">Event</label>
                        <input type="text" class="form-control" id="addEvent" name="event">
                    </div>
                    <div class="form-group">
                        <label for="addGroupIndex">Group Index</label>
                        <input type="number" class="form-control" id="addGroupIndex" name="groupIndex">
                    </div>
                    <div class="form-group">
                        <label for="addGroupName">Group Name</label>
                        <input type="text" class="form-control" id="addGroupName" name="groupName">
                    </div>
                    <div class="form-group">
                        <label for="addIndex">Index</label>
                        <input type="number" class="form-control" id="addIndex" name="index">
                    </div>
                    <div class="form-group">
                        <label for="addName">Name</label>
                        <input type="text" class="form-control" id="addName" name="sportName">
                    </div>
                    <div class="form-group">
                        <label for="addArea">Area</label>
                        <input type="text" class="form-control" id="addArea" name="area">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="addSportsman()">Add Sportsman</button>
            </div>
        </div>
    </div>
</div>

<div class="container mt-5">
    <h2>Sportsman Management</h2>
    <button id="addSportsmanBtn" class="btn btn-success mb-3">Add Sportsman</button>
    <table id="sportsmanTable" class="table table-striped">
        <thead>
        <tr>
            <th>Event</th>
            <th>Group Index</th>
            <th>Group Name</th>
            <th>Index</th>
            <th>Name</th>
            <th>Area</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <!-- Sportsman data will be inserted here -->
        </tbody>
    </table>
</div>

<!-- Add jQuery -->
<script src="./js/jquery-3.5.1.min.js"></script>
<!-- Add Bootstrap JS -->
<script src="./js/bootstrap.min.js"></script>
<!-- Add Bootstrap DataTable JS -->
<script src="./js/jquery.dataTables.min.js"></script>
<script src="./js/dataTables.bootstrap4.min.js"></script>

<script>
    $(document).ready(function () {
        // 删除Sportsman记录的函数
        function deleteSportsman(id) {
            console.log('delete' + id)
            $.ajax({
                url: "/sportsmen/" + id,
                type: 'DELETE',
                success: function (result) {
                    // 删除成功后重新加载表格数据
                    $('#sportsmanTable').DataTable().ajax.reload();
                }
            });
        }

        // DataTable initialization
        $.get("/sportsmen", function (data) {
            // 使用DataTable渲染表格
            $('#sportsmanTable').DataTable({
                data: data,
                columns: [
                    {data: 'event'},
                    {data: 'groupIndex'},
                    {data: 'groupName'},
                    {data: 'index'},
                    {data: 'sportName'},
                    {data: 'area'},
                    {
                        data: null,
                        render: function (data, type, row) {
                            // 添加隐藏字段uuid
                            return '<input type="hidden" name="uuid" value="' + data.uuid + '">' +
                                '<button class="btn btn-info btn-sm" onclick="editSportsman(\'' + data.uuid + '\')">编辑</button>' +
                                '<button class="btn btn-danger btn-sm" onclick="deleteSportsman(\'' + data.uuid + '\')">删除</button>';
                        }
                    }
                ]
            });
        });

        // Handle Add Sportsman button click
        // 处理添加运动员按钮点击
        $('#addSportsmanBtn').click(function () {
            // 清空添加模态窗口中的表单字段
            $('#addSportsmanForm')[0].reset();
            // 显示添加模态窗口
            $('#addSportsmanModal').modal('show');
        });


        // Implement Edit and Delete button click handlers as needed


    });
</script>
</body>
</html>
